<template>
  <div class="container" style="overflow-y: scroll">
    <el-backtop target=".container" style="color: #646cff" :bottom="100" :right="100">
      <img src="../../public/ship02.jpg" width="35" height="35" style="border-radius: 100%"/>
    </el-backtop>
    <div class="header">
      <div class="header-left" style="display: flex;align-items: center;margin-left: 20px">
        <img src="../../public/logo/java.png" width="40" height="40" alt="log"/>
        <span style="font-size: 23px;margin-left: 15px">每个梦想都值得被认真对待</span>
      </div>
      <div class="header-right">
        <el-dropdown>
          <img src="../../public/ikun.jpg" style="border-radius: 100px;margin-right: 20px" width="40" height="40"
               alt="log"/>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item :icon="User" @click="$message.warning('暂不支持查看')">个人信息</el-dropdown-item>
              <el-dropdown-item :icon="Edit" @click="$message.warning('暂不支持修改密码')">修改密码</el-dropdown-item>
              <el-dropdown-item :icon="Right" @click="$router.push('/user/access')">安全退出</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
    <div class="main">
      <div class="post-search" style="margin-bottom: 20px">
        <el-input
            v-model="searchInput"
            placeholder="请输入关键词"
            class="input-with-select"
            :prefix-icon="Search"
        >
        </el-input>
        <el-button style="margin-left: 20px">搜索</el-button>
      </div>
      <div class="post-list">
        <div
            class="post-profile"
            v-for="profile in selfPostProfileList"
            :key="profile.id"
            style="margin-bottom: 20px;display: flex;justify-content: space-between"
        >
          <div class="profile-left" style="display: flex">
            <img :src="profile.homeImage" width="100" height="100"/>
            <div style="margin-left: 20px;margin-top: 25px">
              <p>{{ profile.title }}</p>
              <el-tag type="warning" style="font-size: 15px">阅读量&nbsp;{{ 1024 }}</el-tag>
            </div>
          </div>
          <div class="profile-right">
            <div style="margin-top: 25px;margin-right: 20px">
              <span v-if="profile.updateTime">{{ profile.updateTime }}&nbsp;已修改</span>
              <span v-else>{{ profile.createTime }}&nbsp;创建</span>
            </div>
            <div style="float: right;margin-top: 30px;cursor: pointer;margin-right: 20px">
              <el-dropdown trigger="click">
                ...
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item :icon="Edit " @click="toEditPost(profile.id)">编辑</el-dropdown-item>
                    <el-dropdown-item :icon="Delete " @click="$message.warning('暂不支持删除')">删除</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </div>
        </div>
      </div>
      <div class="load-more">
        <button class="btn" style="cursor: pointer" @click="addPostProfile">加载更多</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import {User, Edit, Right, Search, Delete} from '@element-plus/icons-vue'
import {useRouter} from "vue-router";
import {ref} from "vue";

const router = useRouter()
const searchInput = ref('')
const selfPostProfileList = ref([
  {
    id: 1,
    title: 'Java这么卷了？',
    createTime: '2023-03-17',
    updateTime: '2023-03-18',
    homeImage: '../../public/ikun.jpg'
  },
  {
    id: 2,
    title: 'chatGPT对于教育行业的影响',
    createTime: '2023-03-17',
    updateTime: '2023-03-18',
    homeImage: '../../public/ikun.jpg'
  },
  {
    id: 3,
    title: '文心一眼 VS chatGPT',
    createTime: '2023-03-17',
    updateTime: '2023-03-18',
    homeImage: '../../public/ikun.jpg'
  },
  {
    id: 4,
    title: '文心一眼 VS chatGPT',
    createTime: '2023-03-17',
    updateTime: '2023-03-18',
    homeImage: '../../public/ikun.jpg'
  },
  {
    id: 5,
    title: '文心一眼 VS chatGPT',
    createTime: '2023-03-17',
    updateTime: '2023-03-18',
    homeImage: '../../public/ikun.jpg'
  },
  {
    id: 6,
    title: '文心一眼 VS chatGPT',
    createTime: '2023-03-17',
    updateTime: '2023-03-18',
    homeImage: '../../public/ikun.jpg'
  },
  {
    id: 7,
    title: '文心一眼 VS chatGPT',
    createTime: '2023-03-17',
    updateTime: '2023-03-18',
    homeImage: '../../public/ikun.jpg'
  }
])

// 加载更多
const addPostProfile = () => {
  const list = [
    {
      id: 8,
      title: '文心一眼 VS chatGPT',
      createTime: '2023-03-17',
      updateTime: '2023-03-18',
      homeImage: '../../public/ikun.jpg'
    },
    {
      id: 9,
      title: '文心一眼 VS chatGPT',
      createTime: '2023-03-17',
      updateTime: '2023-03-18',
      homeImage: '../../public/ikun.jpg'
    },
    {
      id: 10,
      title: '百度真要崛起？',
      createTime: '2023-03-17',
      updateTime: '2023-03-18',
      homeImage: '../../public/ikun.jpg'
    },
  ]
  selfPostProfileList.value.push(...list)
}

// 跳转到编辑页面
const toEditPost = (postId) => {
  router.push({
    name:'Content',
    params:{
      postId
    }
  })
}

</script>

<style lang="less" scoped>
.container {
  .header {
    background-color: #1b1b1b;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #fff;
    align-items: center;
    height: 60px;
    margin-bottom: 25px
  }

  .main {
    .load-more{
      display: flex;
      justify-content: center;
    }
    .post-profile {
      background-color: #263238;
    }

    .post-search {
      width: 280px;
      display: flex;
    }

    width: 80%;
    margin: 0 auto;
  }

  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: url("../public/post/star03.jpg") no-repeat;
  background-size: 100% 100%;
}
.btn {
  --border-color: linear-gradient(-45deg, #ffae00, #7e03aa, #00fffb);
  --border-width: .125em;
  --curve-size: .5em;
  --blur: 30px;
  --bg: #080312;
  --color: #afffff;
  color: var(--color);
  /* use position: relative; so that BG is only for .btn */
  position: relative;
  isolation: isolate;
  display: inline-grid;
  place-content: center;
  padding: .5em 1.5em;
  font-size: 17px;
  border: 0;
  text-transform: uppercase;
  box-shadow: 10px 10px 20px rgba(0, 0, 0, .6);
  clip-path: polygon(
    /* Top-left */
      0% var(--curve-size),

      var(--curve-size) 0,
        /* top-right */
      100% 0,
      100% calc(100% - var(--curve-size)),

        /* bottom-right 1 */
      calc(100% - var(--curve-size)) 100%,
        /* bottom-right 2 */
      0 100%);
  transition: color 250ms;
}

.btn::after,
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
}

.btn::before {
  background: var(--border-color);
  background-size: 300% 300%;
  animation: move-bg7234 5s ease infinite;
  z-index: -2;
}

@keyframes move-bg7234 {
  0% {
    background-position: 31% 0%
  }

  50% {
    background-position: 70% 100%
  }

  100% {
    background-position: 31% 0%
  }
}

.btn::after {
  background: var(--bg);
  z-index: -1;
  clip-path: polygon(
    /* Top-left */
      var(--border-width)
      calc(var(--curve-size) + var(--border-width) * .5),

      calc(var(--curve-size) + var(--border-width) * .5) var(--border-width),

        /* top-right */
      calc(100% - var(--border-width))
      var(--border-width),

      calc(100% - var(--border-width))
      calc(100% - calc(var(--curve-size) + var(--border-width) * .5)),

        /* bottom-right 1 */
      calc(100% - calc(var(--curve-size) + var(--border-width) * .5)) calc(100% - var(--border-width)),
        /* bottom-right 2 */
      var(--border-width) calc(100% - var(--border-width)));
  transition: clip-path 500ms;
}

.btn:where(:hover, :focus)::after {
  clip-path: polygon(
    /* Top-left */
      calc(100% - var(--border-width))

      calc(100% - calc(var(--curve-size) + var(--border-width) * 0.5)),

      calc(100% - var(--border-width))

      var(--border-width),

        /* top-right */
      calc(100% - var(--border-width))

      var(--border-width),

      calc(100% - var(--border-width))

      calc(100% - calc(var(--curve-size) + var(--border-width) * .5)),

        /* bottom-right 1 */
      calc(100% - calc(var(--curve-size) + var(--border-width) * .5))
      calc(100% - var(--border-width)),

        /* bottom-right 2 */
      calc(100% - calc(var(--curve-size) + var(--border-width) * 0.5))
      calc(100% - var(--border-width)));
  transition: 200ms;
}

.btn:where(:hover, :focus) {
  color: #fff;
}
</style>